<template>
    <div class="app-container app-padding login">
        <div class="header">
            <div class="logo">
                <img  src="https://www.aiaabiok.com/ag.png" alt="">
            </div>
            <h2 class="welcome">欢迎来到AG量化</h2>
            <!-- <van-row>
                <van-col span="6"><span class="btn-padding text-bottom-activity">立即登录</span></van-col>
                <van-col span="6"><span class="btn-padding" @click="$router.replace('/register')">注册</span></van-col>
            </van-row> -->
        </div>

        <van-form @submit="onSubmit">
            <van-field v-model="username" name="userName" autocomplete="off" placeholder="手机号" />
            <van-field v-model="password" type="password" name="password" placeholder="密码" />
            <div class="login-remark">
                <div class="agree">
                    <!-- 第一次登录 -->
                    <template  v-if="showFirst">
                        <van-checkbox v-model="checked">我已阅读 &nbsp;</van-checkbox>
                        <span class="text-color-fouse" @click="$router.push('/content?type=user')">用户手册</span>
                        &nbsp;和 &nbsp;<span class="text-color-fouse" @click="$router.push('/content?type=private')">隐私政策</span>
                    </template>
                    <template v-else>
                        <van-checkbox v-model="isCheckedRemember">记住密码 &nbsp;</van-checkbox>
                    </template>
                </div>
                <div class="forget">
                    <span class="text-color-light" @click="$router.push('/forget')">忘记密码</span>
                </div>
            </div>
            
            
            <div class="mt10" style="margin-bottom: 0;">
                <van-button block type="primary" native-type="submit">立即登录</van-button>
            </div>
            <div class="register mt20">
                没有账户?<span class="text-color-light" @click="$router.replace('/register')">注册</span>
            </div>
        </van-form>
    </div>
</template>

<script>
import { useUserStore } from '../store/user'
import { mapActions } from 'pinia'
import { showToast } from 'vant'
import Cookies from 'js-cookie'
import LocalSetting from '@/utils/local-setting';
export default {
    name: 'Login',
    data() {
        return {
            showFirst: true,
            isCheckedRemember: false,
            rememberChecked: false,
            username: '',
            password: '',
            loading: false,
            checked: ''
        }
    },
    created() {
        console.log('====created', LocalSetting.setting('isShowFist'))
        this.showFirst = !LocalSetting.setting('isShowFist');
        this.isCheckedRemember = !!LocalSetting.setting('isCheckedRemember');
        const { username, password } = LocalSetting.setting('userInfo') || {};
        if (this.isCheckedRemember && !this.showFirst) {
            this.username = username || '';
            this.password = password || '';
        }
    },
    methods: {
        ...mapActions(useUserStore, ['login']),
        onSubmit() {
            if (!this.checked && this.showFirst) {
                showToast('请同意用户手冊和隐私政策')
                return
            }
            if (!this.username) {
                showToast('请填写邮箱号或手机号')
                return
            }
            if (!this.password) {
                showToast('请填写密码,至少8位包括数字和大小写字母')
                return
            }
            this.login({ username: this.username, password: this.password }).then(() => {
                this.loading = false
                Cookies.remove('aggrement')
                this.$router.replace({ path: '/home' })
                LocalSetting.setting('isShowFist', 1);
                LocalSetting.setting('isCheckedRemember', this.isCheckedRemember);
                if (this.isCheckedRemember) {
                    LocalSetting.setting('userInfo', {
                        username: this.username,
                        password: this.password
                    })
                }
            }).catch((e) => {
                showToast(e)
                this.loading = false
            })
        }
    }
}
</script>
<style lang="less" scoped>
.remember {
    // display: flex;
    // justify-content: flex-end;

}
</style>